<div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:flex-col sm:align-center">
        <h1 class="text-5xl tracking-tight font-bold text-gray-900 sm:text-center">Subscribing to <%= @plan.name %> plan, <%= @freq %></h1>
        <p class="mt-5 text-xl text-gray-500 sm:text-center">Choose organization:</p>
    </div>

    <div class="max-w-2xl mx-auto mt-12 grid grid-cols-1 gap-4">
        <%= for organization <- @organizations do %>
          <div class="flex items-center justify-between gap-x-6 px-6 py-5 rounded-lg border border-gray-300 bg-white">
            <div class="flex min-w-0 gap-x-4">
              <img class="h-12 w-12 flex-none rounded-full bg-gray-50" src={organization.logo} alt="">
              <div class="min-w-0 flex-auto">
                <p class="text-sm font-semibold leading-6 text-gray-900">
                    <%= organization.name %> <%= AzimuttWeb.LayoutView.plan_badge(organization.plan) %>
                </p>
                <p class="mt-1 truncate text-sm leading-5 text-gray-500">
                    <%= if organization.plan_seats do %>
                    <%= Azimutt.Utils.Stringx.pluralize(organization.plan_seats, "seat") %> -
                    <% end %>
                    <%= Azimutt.Utils.Stringx.pluralize(length(organization.members), "member") %>
                </p>
              </div>
            </div>
            <%= if organization.plan == "free" do %>
              <%= link "Subscribe", to: Routes.organization_billing_path(@conn, :new, organization.id, plan: @plan.id, freq: @freq), class: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
            <% else %>
              <%= link "Manage subscription", to: Routes.organization_billing_path(@conn, :edit, organization.id), method: :post, class: "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" %>
            <% end %>
          </div>
        <% end %>
        <a href={Routes.organization_path(@conn, :new, redirect: Routes.subscribe_path(@conn, :price, @plan.id, @freq))} class="flex w-full items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
            Create new organization
        </a>
    </div>
</div>
